<template>
  <main-tpl>
    <template #main>
      <div class="video-detail">
        <div class="video-detail-button">
          <a-button @click="back">返回</a-button>
          <span class="video-detail-title">{{ detail?.name || "-" }}</span>
        </div>
        <div class="video-detail-main">
          <div class="video-detail-player">
            <vue3-video-play v-bind="options" poster="https://go.dreamwq.com/videos/ironMan.jpg" />
          </div>
          <div class="video-detail-content">
            <a-tabs v-model:activeKey="activeKey">
              <a-tab-pane :key="1" tab="文本">
                <div class="video-detail-content-tab">
                  <div class="video-detail-content-card">
                    <div class="video-detail-content-title">内容理解</div>
                    <div class="video-detail-content-value">{{ detail?.result || "" }}</div>
                  </div>
                  <div class="video-detail-content-card">
                    <div class="video-detail-content-title">语音识别</div>
                    <div class="video-detail-content-value">{{ detail?.asrText || "" }}</div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane :key="2" tab="图片">
                <div class="video-detail-content-tab">
                  <a-row type="flex" :gutter="[16, 16]">
                    <a-col
                      :span="6"
                      v-for="(item, index) in detail?.thumbnailResult || []"
                      :key="index"
                    >
                      <a-image :width="192" :height="108" :src="downloadDemoFile(item)" />
                    </a-col>
                  </a-row>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <div class="video-detail-table">
          <a-table
            class="margin-top-16 video-detail-table-body"
            :dataSource="dataList"
            :pagination="pagination"
            :columns="columns"
            size="middle"
            @change="tableChange"
            :loading="loading"
            :scroll="{ y: 200 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'createTime'">
                {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
              <template v-if="column.key === 'updateTime'">
                {{ dayjs(record.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
              <template v-if="column.key === 'status'">
                <span v-if="record.status === 0">运行中</span>
                <span v-else-if="record.status === 1">成功</span>
                <span v-else>失败</span>
              </template>
              <template v-if="column.key === 'operation'">
                <a-button type="link" @click="toKidDetail(record)">查看详情</a-button>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </template>
  </main-tpl>
</template>
<script>
import { onMounted, reactive, toRefs, nextTick } from "vue";
import tablePagination from "@/composables/tablePagination";
import { useRouter } from "vue-router";
import { detailTask, getKidTask, downloadDemoFile } from "@/api/video";
import { message } from "ant-design-vue";
import dayjs from "dayjs";

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: 50,
  },
  {
    title: "素材名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 180,
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: 180,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 100,
  },
];

export default {
  name: "VideoDetail",

  setup() {
    const options = reactive({
      width: "800px", //播放器高度
      height: "450px", //播放器高度
      color: "#409eff", //主题色
      title: "", //视频名称
      src: "", //视频源
      muted: false, //静音
      webFullScreen: false,
      speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      lightOff: false, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制器
    });

    const router = useRouter();
    const back = () => {
      router.go(-1);
    };

    const getKidTaskList = (id) => {
      state.loading = true;
      if (!id) {
        id = router.currentRoute.value.query.id;
      }
      const dto = {
        pid: id,
        page: state.pagination.current - 1,
        pageSize: state.pagination.pageSize,
      };
      getKidTask(dto)
        .then((res) => {
          if (res.result === true) {
            let { responseList = [], total } = res?.data;
            state.dataList = responseList;
            state.pagination.total = total;
          } else {
            message.error("获取视频详情列表失败：" + res.message);
          }
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
          message.error("获取视频详情列表失败");
        });
    };

    const state = reactive({
      modalVisible: false,
      detail: {},
      ...tablePagination(getKidTaskList),
      dataList: [],
      loading: false,
      activeKey: 1,
    });

    const init = () => {
      if (router.currentRoute.value.query.id) {
        getDetail(router.currentRoute.value.query.id);
        getKidTaskList(router.currentRoute.value.query.id);
      }
    };

    onMounted(() => {
      nextTick(() => {
        init();
      });
    });

    const getDetail = (id) => {
      const dto = {
        id: id,
      };
      detailTask(dto)
        .then((res) => {
          if (res.result === true) {
            state.detail = res?.data || {};
            options.src = downloadDemoFile(state.detail.filepath);
          } else {
            message.error("获取视频详情失败：" + res.message);
          }
        })
        .catch(() => {
          message.error("获取视频详情失败");
        });
    };

    const toKidDetail = (record) => {
      router.push({
        path: "/video/tableDetail",
        query: {
          id: record.id,
        },
      });
    };

    return {
      ...toRefs(state),
      options,
      back,
      columns,
      dayjs,
      toKidDetail,
      downloadDemoFile,
    };
  },
};
</script>
<style lang="scss" scoped>
.video-detail {
  height: 100%;
  .video-detail-title {
    font-size: 24px;
    padding-left: 16px;
  }
  .video-detail-main {
    height: 450px;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    .video-detail-content {
      width: 100%;
      height: 100%;
      margin-left: 40px;
      .video-detail-content-tab {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        overflow-y: auto;
        overflow-x: hidden;
        height: 388px;
      }
      .video-detail-content-card {
        width: 49%;
      }
      .video-detail-content-title {
        font-size: 24px;
        font-weight: bold;
      }
      .video-detail-content-value {
        white-space: pre-line;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        width: 100%;
        height: 320px;
      }
    }
  }
  .video-detail-table {
    margin-top: 8px;
    .video-detail-table-body {
      height: 245px;
    }
  }
}
</style>
